<template>
  <div class="indexsWrapper">
    <div class="communityTitle socailGroupGraphTitle">
      <p class="bigTitle">Multichain social</p>
      <p>Web3 communities on different chains</p>
      <p>Users are communities, and the people you follow become your own community, forming a unique social network</p>
      <p>Social is proof, prevent personal evil, make social evaluation for individuals, present social evaluation proof on the chain</p>
      <p>Here you have absolute ownership, allowing you to speak freely, chat, share, tweet, and even earn tokens</p>
      <p>Diverse social interest tags</p>
      <p>Diverse social interest tags that match wallets, friends, and communities you want to track</p>
      <p>Here, you can follow who you want to follow and call yourself a community</p>
    </div>

    <div class="tagsCloud">
      <div class="tagsCloudTitle">
        <p class="bigTitle">Diversified interest label</p>
        <p class="smallTitle">Find your own social attributes in Web3</p>
        <p class="smallTitle">Find friends that interest you</p>
        <p class="smallTitle">Follow each other</p>
        <p class="smallTitle">Chat with each other</p>
        <p class="smallTitle">And even trade with each other</p>
      </div>
      <img class="img" :src="require('~/assets/images/tags.png')" width="462" alt="tags cloud" />
    </div>
    <div class="credentialTitle">
      <div>
        <p class="bigTitle">Social as credential</p>
        <p class="smallTitle">Prevent personal evil</p>
        <p class="smallTitle">Make social evaluation for individuals</p>
        <p class="smallTitle">Present social evaluation proof on the chain</p>
      </div>
      <img :src="require('~/assets/images/socail.jpg')" width="462" alt="socail" />
    </div>
    <div class="communityTitle socailGroupGraphTitle">
      <p class="bigTitle">User as community</p>
      <p class="smallTitle">Friends you follow become your own community</p>
      <p class="smallTitle">Become a unique social network</p>
    </div>
    <div id="socailGroupGraph" class="socailGroupGraph"></div>
  </div>
</template>

<script lang="ts">
import dataset from '@/assets/js/blocks.json'
import { Component } from 'nuxt-property-decorator'
import { BaseVue } from '@/plugins/base-vue'

@Component({
  layout: 'home',
})
export default class Blog extends BaseVue {
  mounted() {
    type Global = Window &
      typeof globalThis & { ForceGraph3D: Function; THREE: Function }
    const GlobalWinow = window as Global
    this.$nextTick(() => {
      const imgs = [
        'cat.jpg',
        'dog.jpg',
        'eagle.jpg',
        'elephant.jpg',
        'grasshopper.jpg',
        'octopus.jpg',
        'owl.jpg',
        'panda.jpg',
        'squirrel.jpg',
        'tiger.jpg',
        'whale.jpg',
      ]
      const elem = document.getElementById('socailGroupGraph')

      const Graph = GlobalWinow.ForceGraph3D()(elem)
        .width(window.innerWidth * 0.625)
        .height(500)
        .nodeThreeObject((obj: any) => {
          const imgTexture = new GlobalWinow.THREE.TextureLoader().load(
            `./img/${obj.img}`
          )
          const material = new GlobalWinow.THREE.SpriteMaterial({
            map: imgTexture,
          })
          const sprite = new GlobalWinow.THREE.Sprite(material)
          sprite.scale.set(12, 12, 12)
          return sprite
        })
        .graphData(dataset)
        .nodeAutoColorBy('user')
        .nodeLabel((node: any) => {
          return `userName：${node.user}`
        })
        .onNodeClick((node: any) => {})
    })
  }
}
</script>

<style lang="scss" scoped>
.indexsWrapper {
  width: 62.5%;
  margin: 100px auto;
  padding: 24px;

  .socailGroupGraphTitle {
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    line-height: 114%;
    color: #ececec;
    letter-spacing: 0.02em;
    padding-bottom: 60px;
  }

  .tagsCloud {
    position: relative;
    display: flex;
    justify-content: right;
    padding-bottom: 60px;

    svg {
      position: absolute;
      transform-box: fill-box;

      clipPath {
        transform-origin: right bottom;
        transform-origin: 150% 250%;
        transform: scale(2) translate(80%, 100%);
        animation: turn-around 15s infinite linear;
      }
    }

    img.mask {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      clip-path: url(#mask);
    }

    @keyframes turn-around {
      from {
        transform: rotate(0) scale(2) translate(80%, 100%);
      }

      to {
        transform: rotate(2turn) scale(2) translate(80%, 100%);
      }
    }

    .tagsCloudTitle {
      position: absolute;
      left: 0;
      z-index: 10;

      .bigTitle {
        font-size: 50px;
        color: #fff;
        margin-bottom: 50px;
        text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0,
          0px 3px 0px #a0a0a0, 0px 4px 0px #909090,
          0px 5px 10px rgba(0, 0, 0, 0.9);
      }

      .smallTitle {
        transition: all 0.5s;
        cursor: pointer;
        font-size: 30px;
        padding-bottom: 30px;
        color: #666;
        text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0,
          0px 3px 0px #a0a0a0, 0px 4px 0px #909090,
          0px 5px 10px rgba(0, 0, 0, 0.9);

        &:hover {
          color: #fff;
        }
      }
    }

    .img {
      position: relative;
      z-index: 1;
      border-radius: 50%;
      transition: all 0.5s;
      animation: fadenum 15s infinite linear;
      box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
        0 0 100px #03e9f4;

      &:hover {
        transition: 0.5s;
        animation: none;
      }
    }
  }

  @keyframes fadenum {
    100% {
      transform: rotate(360deg);
    }
  }

  .communityTitle {
    padding-top: 50px;

    .bigTitle {
      font-size: 50px;
      color: #fff;
      margin-bottom: 50px;
      text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);
    }

    .smallTitle {
      transition: all 0.5s;
      cursor: pointer;
      font-size: 30px;
      color: #666;
      text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);

      &:hover {
        color: #fff;
      }
    }
  }

  .credentialTitle {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;

    .bigTitle {
      font-size: 50px;
      color: #fff;
      margin-bottom: 50px;
      text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);
    }

    .smallTitle {
      padding-bottom: 30px;
      transition: all 0.5s;
      cursor: pointer;
      font-size: 30px;
      color: #666;
      text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.9);

      &:hover {
        color: #fff;
      }
    }
  }
}
</style>
